<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 36</title>
    <style>
        div {
            font-size: 66px;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="root"></div>
</body>
<script>
    // toRef
    const app = Vue.createApp({

        setup(props, context) {
            const {reactive,toRefs,readonly} = Vue;
            const data = reactive({name: 'dell'})
            setTimeout(() => {
                data.name = 'lee'
            }, 2000)

            const {name} = toRefs(data);
            return {name}
        },

        // created 实例被完全初始化之前
        template: `
          <div @click="handleClick">{{ name }}</div>
        `
    });


    const vm = app.mount('#root');
</script>
</html>